<template>
  <view class="innerContain">
    <view class="top-content"></view>
    <view class='topradio'>

    <view class="top">
      <innerCard :data="data" />
    </view>
    <!-- <view class="gap"></view> -->
    <view class="childborder">
      <u-form  :model="form" ref="uForm" :error-type="errorType">


   <view v-if='form.status=="正常"'>
          <u-form-item class="selectone" style="padding:0rpx 0rpx 12rpx 0rpx;margin-top:-14rpx;" label="状态"  prop="status">
           <!-- <span slot="label">状态</span> -->
           <u-tag v-if='form.status=="正常"' :text="form.status" type="success" mode='dark' style="" size='mini' shape="circle"/>
           <u-tag v-else-if='form.status=="异常"' :text="form.status" type="error" mode='dark' style="" size='mini' shape="circle"/>
            <u-input
              class="input1"
              v-model="form.status"
              type="select"
              placeholder="请选择状态"
              @click="showStatus = true"
            />
            <u-select
              v-model="showStatus"
              :list="statusList"
              @confirm="selectStatus"
            ></u-select>
          </u-form-item>
        
        </view>



        <view v-else>
          <u-form-item class="selectone" style="padding:0rpx 0rpx 24rpx 0rpx;margin-top:-14rpx;" label="状态"  prop="status">
           <!-- <span slot="label">状态</span> -->
           <u-tag v-if='form.status=="正常"' :text="form.status" type="success" mode='dark' style="" size='mini' shape="circle"/>
           <u-tag v-else-if='form.status=="异常"' :text="form.status" type="error" mode='dark' style="" size='mini' shape="circle"/>
            <u-input
              class="input1"
              v-model="form.status"
              type="select"
              placeholder="请选择状态"
              @click="showStatus = true"
            />
            <u-select
              v-model="showStatus"
              :list="statusList"
              @confirm="selectStatus"
            ></u-select>
          </u-form-item>
          <view class v-if="hidden">
            <u-form-item label="裂纹"  class="selectone1" prop="detail">
              <u-input
                v-model="form.detail"
                type="select"
                 placeholder="请选择裂纹方式"
                @click="crackleStatus = true"
              />
              <u-select
                v-model="crackleStatus"
                :list="crackleList"
                @confirm="cracklemethods"
              ></u-select>
            </u-form-item>
            <view class>
             
              <u-form-item label-width="170"  class="selectone1"  label="检查件名称" prop="name">
                <u-input style="right:32rpx" type="text" placeholder-class="co" placeholder="请输入检查件名称"  v-model="form.name" />
              </u-form-item>
              <u-form-item label="位置"  class="selectone1"  prop="address">
                <u-input style="right:32rpx" class="selectone1"  type="text"  placeholder="请输入位置" v-model="form.address" />
              </u-form-item>
              <u-form-item label-width="140" class="selectone1"  label="异常状况" prop="errmsg">
                <u-input style="right:32rpx" type="text"  placeholder="请输入异常状况" v-model="form.errmsg" />
              </u-form-item>
              <u-form-item label-width="140" class="selectone1"  label="异常数值" prop="value">
                <u-input style="right:32rpx" type="number"  placeholder="请输入异常数值" v-model="form.value" />
              </u-form-item>
                 <u-form-item  class="borderbottom selectone1"  style="" label="图片" prop="">
              </u-form-item>
          <Upload class="photoimage" v-model="form.file" />
            </view>
          </view>
        </view>
      </u-form>
    </view>

    <!-- <view class="botton-gap"> </view> -->

    <view class="footer">
      <u-button
        @click="returnHandle()"
        v-if="btnShow"
        class="btn"
        type="primary"
        :ripple="true"
        ripple-bg-color="#32afff"
        >保存
      </u-button>
      <u-button
        @click="submit()"
        v-else
        class="btn"
        type="primary"
        :ripple="true"
        ripple-bg-color="#32afff"
        >提交并处理
      </u-button>
    </view>
    </view>

  </view>
</template>

<script>
import innerCard from "@/components/innerCard/innerCard.vue";
import handleDemo from "../handleDemo/handleDemo.vue";
import {
  pointCheckDeviceDetail,
  pointCheckDeviceDetai,
  pointCheckDeviceDetailEdit,
  pointCheckDescriptionAdd,
  pointCheckeDviceDetailList,
  pointCheckDeviceDetailAdd,
  pointCheckDescriptionEdit
} from "@/api/index.js";
export default {
  props: {
    //上传最大个数
    sucess: {
      type: Boolean,
      default: false
    }
  },
  components: {
    innerCard,
    handleDemo
  },
  onShow() {},
  data() {
    return {
      btnShow: true,
      state: -1,
      data: {},

      List: [
        { item: "裂纹", status: false, warn: false },
        { item: "腐蚀", status: false, warn: false },
        { item: "泄露", status: false, warn: false },
        { item: "异常变形", status: false, warn: false },
        { item: "其他", status: false, warn: false }
      ],
      errorType: ["message"],
      rules: {
        status: [
          {
            required: true,
            message: "请选择状态",
            trigger: ["blur", "change"]
          }
        ],
        detail: [
          {
            required: true,
            message: "请选择裂纹方式",
            trigger: ["blur", "change"]
          }
        ],
        name: [
          {
            required: true,
            message: "请输入检查件名称",
            trigger: ["blur", "change"]
          }
        ],
        address: [
          {
            required: true,
            message: "请输入位置",
            trigger: ["blur", "change"]
          }
        ],
        errmsg: [
          {
            required: true,
            message: "请输入异常状况",
            trigger: ["blur", "change"]
          }
        ],
        value: [
          {
            required: true,
            message: "请输入异常数值",
            trigger: ["blur", "change"]
          }
        ]
      },
      form1: {},
      form: { status: "" },
      Tdata: false,
      firstCrackle: 0,
      hidden: true,
      showStatus: false,
      crackleStatus: false,
      data: {
        name: "波纹管",
        time: "2021-8-19 12:02",
        number: "01",
        position: "南京",
        normal: "2",
        error: "2",
        num: "1",
        isCheck: true,
        people: "王五"
      },
      crackleList: [
        {
          value: "1",
          label: "无损检测裂纹"
        },
        {
          value: "2",
          label: "表面裂纹"
        }
      ],
      statusList: [
        {
          value: "1",
          label: "正常"
        },
        {
          value: "2",
          label: "异常"
        }
      ],
      number: null
    };
  },
  onLoad(val) {
    this.state = val.Tdata;
    this.tf = val.tf;
    this.taskDeviceId = val.taskDeviceId;
    this.Tdata = val.Tdata;
    // this.cartcount = getApp().globalData.uname
    this.getList();
  },
  watch: {
    "form.status": {
      // 可以监听对象的单个属性
      handler(newval, oldval) {
        if (this.form.status == "异常") {
          // setTimeout(() => {
          //   var that = this;
          //   uni.getSystemInfo({
          //     success(res) {
          //       var a = document.getElementsByClassName("uicon-plus");
          //       a.className = "unicon";
          //     }
          //   });
          // }, 500);
          this.hidden = true;
          this.btnShow = false;
        } else if (this.form.status == "正常") {
          this.hidden = false;
          this.btnShow = true;
        }
      },
      deep: true
    }
  },
  methods: {
    stateClick() {
      this.showStatus = true;
    },
    getList() {
         uni.showLoading({
        title: "加载中"
      });
      if (this.tf) {
        this.hidden = false;
        this.state = this.taskDeviceId;
        pointCheckDeviceDetai(this.state).then(res => {
          this.id = res.data.id;
          this.form = res.data;

          pointCheckeDviceDetailList(this.id).then(res1 => {
            this.childid = res1.data.id;
            for (let i in res1.data) {
              if (!res1.data[i]) {
                delete res1.data[i];
              }
            }
            this.form1 = res1.data;
            let name = { ...this.form },
              form2 = { ...this.form1 };
            this.form = { ...name, ...form2 };
          });
              uni.hideLoading();
        });
      } else {
        this.hidden = false;
        pointCheckDeviceDetail(this.state).then(res => {
          res.data["波纹管"].pointCheckDeviceDetails.forEach(item => {
            if (item.item == "裂纹") {
              this.id = item.id;
              for (let i in item) {
                if (!item[i]) {
                  delete item[i];
                }
              }
              this.form = item;
              if (
                (this.id != "undefined") |
                (this.id != null) |
                (this.id != null)
              ) {
                pointCheckeDviceDetailList(this.id).then(res1 => {
                  this.childid = res1.data.id;
                  for (let i in res1.data) {
                    if (!res1.data[i]) {
                      delete res1.data[i];
                    }
                  }
                  this.form1 = res1.data;
                  let name = { ...this.form },
                    form2 = { ...this.form1 };
                  this.form = { ...name, ...form2 };
                });

                pointCheckeDviceDetailList(this.id).then(res1 => {
                  this.childid = res1.data.id;
                  for (let i in res1.data) {
                    if (!res1.data[i]) {
                      delete res1.data[i];
                    }
                  }
                  this.form1 = res1.data;
                  let name = { ...this.form },
                    form2 = { ...this.form1 };
                  this.form = { ...name, ...form2 };
                });
              }
            } else {
              this.hidden = false;
            }
          });
          this.hidden = false;
              uni.hideLoading();
        });
      }
    },
    returnHandle() {
      if (this.tf) {
        this.$refs.uForm.validate(valid => {
          if (valid) {
            const data = {
              id: String(this.id),
              taskDeviceId: String(this.Tdata),
              type: "波纹管",
              item: "裂纹",
              status: this.form.status
            };
            if (!data.id | (data.id == "undefined")) {
              delete data["id"];
            }
            pointCheckDeviceDetailAdd(data).then(res => {
              uni.navigateBack({
                delta: 1
              });
            });
          } else {
            console.log("验证失败");
          }
        });
      } else {
        this.$refs.uForm.validate(valid => {
          if (valid) {
            const data = {
              id: String(this.id),
              taskDeviceId: String(this.state),
              type: "波纹管",
              item: "裂纹",
              status: this.form.status
            };
            if (!data.id | (data.id == "undefined")) {
              delete data["id"];
            }
            pointCheckDeviceDetailAdd(data).then(res => {
              uni.navigateBack({
                delta: 1
              });
            });
          } else {
            console.log("验证失败");
          }
        });
      }
    },
    submit() {
      if (this.tf) {
        this.$refs.uForm.validate(valid => {
          if (valid) {
            const _this = this;
            const data = {
              id: String(this.id),
              taskDeviceId: String(this.Tdata),
              type: "波纹管",
              item: "裂纹",
              file: this.form.file,
              status: this.form.status,
              detail: this.form.detail
            };
            const data2 = {
              id: String(this.childid),
              detailId: String(this.id),
              name: this.form.name,
              address: this.form.address,
              errmsg: this.form.errmsg,
              value: this.form.value
            };
            if (
              (data.id == null) |
              (data.id == "") |
              (data.id == "undefined")
            ) {
              delete data["id"];
            }
            if (
              (data2.id == null) |
              (data2.id == "") |
              (data2.id == "undefined")
            ) {
              delete data2["id"];
            }
            pointCheckDeviceDetailAdd(data).then(res => {
              pointCheckDeviceDetail(this.state).then(res1 => {
                pointCheckDescriptionAdd(data2).then(res2 => {
                  uni.redirectTo({
                    url:
                      `/pages/handleDemo/handleDemo?position=1&number=` +
                      data2.detailId +
                      "&id=" +
                      this.id
                  });
                });
              });
            });
          } else {
            console.log("验证失败");
          }
        });
      } else {
        this.$refs.uForm.validate(valid => {
          if (valid) {
            const _this = this;
            const data = {
              id: String(this.id),
              taskDeviceId: String(this.state),
              type: "波纹管",
              item: "裂纹",
              file: this.form.file,
              status: this.form.status,
              detail: this.form.detail
            };
            const data2 = {
              id: String(this.childid),
              detailId: String(this.id),
              name: this.form.name,
              address: this.form.address,
              errmsg: this.form.errmsg,
              value: this.form.value
            };
            if (
              (data.id == null) |
              (data.id == "") |
              (data.id == "undefined")
            ) {
              delete data["id"];
            }
            if (
              (data2.id == null) |
              (data2.id == "") |
              (data2.id == "undefined")
            ) {
              delete data2["id"];
            }
            pointCheckDeviceDetailAdd(data).then(res => {
              pointCheckDeviceDetail(this.state).then(res1 => {
                res1.data["波纹管"].pointCheckDeviceDetails.forEach(item => {
                  if (item.item == "裂纹") {
                    data2.detailId = item.id;
                    pointCheckDescriptionAdd(data2).then(res2 => {
                      uni.redirectTo({
                        url:
                          `/pages/handleDemo/handleDemo?position=1&number=` +
                          data2.detailId +
                          "&id=" +
                          this.id
                      });
                    });
                  }
                });
              });
            });
          } else {
            console.log("验证失败");
          }
        });
      }
    },
    selectStatus(e) {
      this.form.status = e[0].label;
      if (e[0].value === "2") {
        this.hidden = true;
      } else {
        this.hidden = false;
      }
    },
    cracklemethods(e) {
      this.form.detail = e[0].label;
    }
  },

  onReady() {
    this.$refs.uForm.setRules(this.rules);
  }
};
</script>
<style lang="scss" scoped>
.innerContain {
  height: 100%;
  position: relative;
  background-color: white;
}
.top-content {
  height: 160rpx;
  background: linear-gradient(to left, #1040be, #026dff);
}
.topradio {
  height: calc(100% - 200rpx);
  overflow-y: auto;
  position: absolute;
  background-color: white;
  // padding: 30rpx;
  width: 100%;
  top: 50rpx;
  border-radius: 40rpx 40rpx 0 0;
  // position: absolute;
  // width: 100%;
  // top: 0rpx;
  // left: 0rpx;
  // background-color: white;
  // border-radius: 40rpx 40rpx 0 0;
}
.top {
  padding: 16rpx;
  /* box-shadow: 20px -77px 0px 19px #c6c6ca; */
  box-shadow: 4rpx 4rpx 20rpx #e5e1e1;
  margin: 24rpx;
  border-radius: 32rpx;
}
.childborder {
  padding: 34rpx 34rpx 10rpx 34rpx;
  margin: 24rpx;

  box-shadow: 0px 6px 33px #e5e1e1;
  border-radius: 32rpx;
}
.trueorfalse {
  margin-right: 20rpx;
  top: 6rpx;
}
.red1 {
  padding: 25rpx 0rpx;
}
.footer {
  background-color: transparent;
}
.btn {
  background: linear-gradient(-34deg, #1040be, #026dff);
  width: 544rpx;
  height: 91rpx;
  font-size: 36rpx;
  font-weight: 500;
  color: #ffffff;
  border-radius: 46rpx;
}
/deep/ .u-form-item--left__content__label {
  font-size: 33rpx;
}
/deep/ .u-input__input {
  // color:
}

.co {
  color: red;
}
/deep/ .u-input__input {
  text-align: right;
}
/deep/ .u-form-item__message {
  text-align: right;
  margin-right: 32rpx;
}
.borderbottom:after {
  border-bottom-width: 0px !important;
}
/deep/ .input1 > .u-input__input > .uni-input-wrapper > .uni-input-input {
  display: none !important;
  //  color:red !important
}
//   /deep/ .u-border-bottom:after {
//     border-top-width: 1px;
//     border-bottom-width: 0px;
// }
// .selectone {
//     .u-border-bottom:after {
//     border-top-width: 0px !important
// }

// }
/deep/ .photoimage {
  .u-add-wrap {
    width: 71px !important;
    height: 71px !important;
  }
}
/deep/ .selectone:after { 
    border-top-width: 0px !important;
    border-bottom-width: 0px !important;
}
.selectone1:after {
      border-top-width: 1px !important;
}
</style>
